<template>
  <scroll-view :class="'wuc-tab ' + tabClass" scroll-with-animation scroll-x :scroll-left="scrollLeft"
    :show-scrollbar="false">
    <view class="wuc-contanier-tab">
      <view class="wuc-tab-item" :class="{ cur: index === tabCur }" v-for="(item, index) in tabList" :key="index"
        :id="index" @tap="tabSelect(index)">
        <text class="text">{{ item.name }}</text>
        <text v-if="item.sort" class="price-icon" :class="{ down: item.sort === 1, up: item.sort !== 1 }"></text>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { computed } from 'vue'
// 定义 props
const props = defineProps({
  tabList: {
    type: Array,
    default: () => []
  },
  tabCur: {
    type: Number,
    default: -1
  },
  tabClass: {
    type: String,
    default: ''
  }
})



// 定义 emits
const emit = defineEmits(['change'])

// 计算滚动位置
const scrollLeft = computed(() => {
  return (props.tabCur - 1) * 40
})
// 切换 tab
function tabSelect(index) {
  if (props.tabCur === index) return
  emit('change', index)
}
</script>

<style lang="scss">
@import '@/styles/style-variables.scss';

.wuc-tab {
  background-color: #fff;
  height: 76rpx;

  /* 针对 H5 端 */
  ::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条 */
  }

  .wuc-contanier-tab {
    background-color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    .wuc-tab-item {
      height: 76rpx;
      line-height: 76rpx;
      border-radius: 38rpx;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      font-size: $font-size;
      text-align: center;
      font-weight: normal;
      padding: 0 30rpx 0 0;
      color: $font-h-color;

      .text {
        white-space: nowrap;
      }

      text {
        white-space: nowrap;
      }

      &.cur {
        color: $color;

        .down::after {
          content: '\e618';
          font-family: 'iconfont' !important;
          color: $color;
          font-size: 38rpx;
          margin-left: -8rpx;
          vertical-align: middle;
        }

        .up::after {
          content: '\e61b';
          font-family: 'iconfont' !important;
          color: $color;
          font-size: 38rpx;
          margin-left: -8rpx;
          vertical-align: middle;
        }
      }

      .down::after {
        content: '\e618';
        font-family: 'iconfont' !important;
        color: #4b5563;
        font-size: 38rpx;
        margin-left: -8rpx;
        vertical-align: middle;
      }

      .up::after {
        content: '\e61b';
        font-family: 'iconfont' !important;
        color: #4b5563;
        font-size: 38rpx;
        margin-left: -8rpx;
        vertical-align: middle;
      }
    }
  }
}
</style>